import React, { useRef, useEffect } from 'react';
import styled from '@emotion/styled';
import { CloseOutlined } from '@ant-design/icons';

interface VideoPreviewProps {
	videoUrl: string;
	onClose: () => void;
}

const VideoPreview: React.FC<VideoPreviewProps> = ({ videoUrl, onClose }) => {
	const videoRef = useRef<HTMLVideoElement>(null);

	useEffect(() => {
		if (videoRef.current) {
			videoRef.current.play();
		}
	}, []);

	const handleClose = () => {
		if (videoRef.current) {
			videoRef.current.pause();
		}
		onClose();
	};

	return (
		<VideoPreviewContainer>
			<CloseIcon onClick={handleClose} />
			<Video
				ref={videoRef}
				autoPlay
				webkit-playsinline="true"
				playsInline
				x5-playsinline="true"
				x5-video-player-type="h5"
				x5-video-orientation="portrait"
				x5-video-player-fullscreen="false"
				preload="auto"
				controls
				controlsList="nodownload noremoteplayback"
				disablePictureInPicture
			>
				<source src={videoUrl} type="video/mp4" />
			</Video>
		</VideoPreviewContainer>
	);
};

export default VideoPreview;

const VideoPreviewContainer = styled.div`
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000000a8;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: center;
`;

const Video = styled.video`
	width: 100%;
	height: 100%;
`;

const CloseIcon = styled(CloseOutlined)`
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	font-size: 24px;
	z-index: 1;
	cursor: pointer;
`;
